<el-dialog
    title="编辑"
    :visible.sync="create.dialog"
    width="1000px"
    top="8vh"
    custom-class="Va-dialog auto"
    :lock-scroll="false"
    append-to-body
    {{--  监测抽屉鼠标事件  --}}
    :close-on-click-modal="mousedownClassBol"
    @mousedown.native="handleWrapperMousedown($event)"
    @mouseup.native="handleWrapperMouseup($event)"
    {{--  监测抽屉鼠标事件 End  --}}
    v-cloak data-7512a93d
>
    <div>
        <el-row :gutter="24" type="flex" class="Va-dialog-main" :style="layouts.dialogFormsHeight" data-7512a93d>

            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-tabs v-model="config.properties" type="card" >
                    <el-tab-pane label="基本信息" name="1"></el-tab-pane>
                    <el-tab-pane label="Banner设置" name="2"></el-tab-pane>
                    <el-tab-pane label="SEO设置" name="3"></el-tab-pane>
                    <el-tab-pane label="栏目内容" name="4"></el-tab-pane>
                </el-tabs>
                <el-form ref="create.model" :model="create.model" :rules="create.rules" label-position="top" size="medium" class="Va-forms" data-7512a93d>

                    <template v-if="config.properties == '1'">
                        <el-form-item label="上级菜单" prop="parent_id">
                            <el-cascader
                                    placeholder="--请选择上级菜单--"
                                    :options="parentsMenuItems"
                                    v-model="create.model.parent_id"
                                    :props="{expandTrigger:'hover', checkStrictly:true}"
                                    @change="emptyChange" style="width: 100%" clearable>
                            </el-cascader>
                        </el-form-item>

                        <el-form-item label="栏目类型" prop="type" required>
                            <el-select v-model="create.model.type" placeholder="请选择">
                                <el-option
                                        v-for="item in typeItems"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                    <span class="select-line-left">@{{ item.name }}</span>
                                    <span class="select-line-right">#@{{ item.link }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="菜单名称" prop="name" required>
                            <el-input v-model="create.model.name" placeholder="请填写菜单名称"></el-input>
                        </el-form-item>

                        <el-form-item label="栏目连接" prop="link" required>
                            <el-input v-model="create.model.link" placeholder="请填写栏目连接" :disabled="create.model.pinyin == 1 ? true : false"></el-input>
                            <el-checkbox v-model="create.model.pinyin" true-label="1" false-label="2" @change="pinyin()">自动生成</el-checkbox>
                            <Va-forms-tips>此处对应的是后端接口地址（非开发者慎用）</Va-forms-tips>
                        </el-form-item>

                        <el-form-item label="默认访问子类" prop="show_child">
                            <el-switch v-model="create.model.show_child" active-text="是" inactive-text="否"></el-switch>
                        </el-form-item>

                        <el-form-item label="模板页面(前端路由)" prop="module_page" required>
                            <el-input v-model="create.model.module_page" placeholder="请填写模板页面"></el-input>
                            <Va-forms-tips>此处对应的是前端模板页面 / 路由（非开发者慎用）</Va-forms-tips>
                        </el-form-item>

                        <el-form-item label="排序" prop="sort" class="float-clear">
                            <el-input-number v-model="create.model.sort" :min="0" :max="999" label="排序"></el-input-number>
                            <va-forms-tips>数字越大越靠前</va-forms-tips>
                        </el-form-item>
                    </template>
                    <template v-else-if="config.properties == '2'">
                        <el-form-item label="banner图片" prop="banner" >
                            <va-picture v-model="create.model.banner" :size="2"></va-picture>
                            <Va-forms-tips>尺寸：1600*210。请上传20M以内的文件，支持png,bmp,jpeg,jpg,gif格式文件</Va-forms-tips>
                        </el-form-item>

                        <el-form-item label="banner链接" prop="banner_link" >
                            <el-input v-model="create.model.banner_link" placeholder="请填写banner链接"></el-input>
                        </el-form-item>

                        <el-form-item label="banner标题" prop="banner_title">
                            <el-input v-model="create.model.banner_title" placeholder="请填写banner标题"></el-input>
                        </el-form-item>

                        <el-form-item label="banner介绍" prop="banner_desc">
                            <el-input v-model="create.model.banner_desc" placeholder="请填写banner介绍"></el-input>
                        </el-form-item>
                    </template>

                    <template v-else-if="config.properties == '3'">
                        <el-form-item label="菜单标题" prop="seo_title">
                            <el-input v-model="create.model.seo_title" placeholder="请填写网站标题" maxlength="80" show-word-limit></el-input>
                            <Va-forms-tips>（Title）针对搜索引擎设置的标题</Va-forms-tips>
                        </el-form-item>

                        <el-form-item label="菜单描述" prop="seo_description">
                            <el-input type="textarea" v-model="create.model.seo_description" placeholder="请填写菜单描述" maxlength="200" show-word-limit></el-input>
                            <Va-forms-tips>（Meta Description）针对搜索引擎设置的描述，200个字以内</Va-forms-tips>
                        </el-form-item>

                        <el-form-item label="菜单关键词" prop="seo_keywords">
                            <el-input type="textarea" v-model="create.model.seo_keywords" placeholder="请填写菜单关键词" maxlength="100" show-word-limit></el-input>
                            <Va-forms-tips>（Meta Keywords）针对搜索引擎设置的关键词</Va-forms-tips>
                        </el-form-item>
                    </template>

                    <template v-else-if="config.properties == '4'">
                        <el-form-item label="详情" required prop="content">
                            <va-editor v-model="create.model.content" :key="config.__key" :gallery="true" v-if="create.dialog" height="500"></va-editor>
                        </el-form-item>
                    </template>
                </el-form>
            </el-col>
        </el-row>
        <div slot="footer" class="Va-dialog-footer" data-7512a93d>
            <div class="Va-text-right" data-7512a93d>
                <el-button @click="dialogFormsSubmits('create')" type="primary" size="medium" :loading="create.loading">
                    @{{create.loading ? '提交中...' : '提 交'}}
                </el-button>
                <el-button @click="dialogFormsCloses('create')" size="medium">取 消</el-button>
            </div>
        </div>
    </div>
</el-dialog>

